import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { NewsComponent } from './components/news/news.component';
import { HomeComponent } from './components/home/home.component';
import { ProductComponent } from './components/product/product.component';
import { NewsDetailComponent } from './components/news-detail/news-detail.component'
import { ProductDeatilComponent } from './components/product-deatil/product-deatil.component';

  import { WelcomeComponent } from './components/welcome/welcome.component';
  import { SettingComponent } from './components/setting/setting.component';

const routes: Routes = [
  {
    path: 'home',                // 路由不能以 / 开始
    component: HomeComponent,
    children: [                // 嵌套路由，子路由， 在home组件里配置出口
      {
        path: 'welcome',
        component: WelcomeComponent
      },
      {
        path: 'settings',
        component: SettingComponent
      },

      {
        path: '**',                  // 二级路由的默认路由
        redirectTo: 'welcome'
      },
    ]
  },
  {
    path: 'news',
    component: NewsComponent
  },
  // {
  //   path: 'news-detail',              // get传值
  //   component: NewsDetailComponent
  // },
  {
    path: 'news-detail/:aid',           // 动态路由传值
    component: NewsDetailComponent
  },

  {
    path: 'product',
    component: ProductComponent
  },
  {
    path: 'product-detail/:pid',              // js路由跳转，动态路由
    component: ProductDeatilComponent
  },

  {
    path: '**',                  // 路由通配
    redirectTo: 'home'           // 重定向
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }


/*
  使用angular 路由时， 会生成这份路由配置文件
    配置路由需要在这里再次引入组件（这些组件之前是在app.module.ts 引入注册过）
*/
